<template>
  <div class="example-basic">
    <el-time-picker
        v-model="value1" is-range
        :disabled-hours="disabledHours"
        :disabled-minutes="disabledMinutes"
        :disabled-seconds="disabledSeconds"
        placeholder="Arbitrary time"
        value-format="HH:mm"
    />
  </div>
  <el-text> {{ value1}}</el-text>
  <el-button @click="submit">点击</el-button>
</template>

<script  setup>
import { ref } from 'vue'

const value1 = ref('')
const startTime = "10:30";
const endTime = "10:41";

const makeRange = (start, end) => {
  const result= []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}
const disabledHours = () => {
  return makeRange(0, parseInt(startTime.split(":")[0]) - 1)
      .concat(makeRange(parseInt(endTime.split(":")[0]) + 1, 23))
}
const disabledMinutes = (hour) => {
  console.log(hour);
  let range = [];
  if (hour === parseInt(startTime.split(":")[0])) {
    range = range.concat(makeRange(0, parseInt(startTime.split(':')[1]) - 1))
  }
  if (hour === parseInt(endTime.split(':')[0])) {
    range = range.concat(makeRange(parseInt(endTime.split(':')[1]) + 1, 59))
  }
  console.log(range)
  return range;
}
const disabledSeconds = (hour, minute) => {
  if (hour === 18 && minute === 30) {
    return makeRange(1, 59)
  }
}
</script>

<style>
.example-basic .el-date-editor {
  margin: 8px;
}
</style>